<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>Drawing</title>
    <link rel="stylesheet" href="light.css" />
    <link rel="icon" href="data:,">
  </head>
  <body>
    <noscript>
      <strong>niivue requires JavaScript.</strong>
    </noscript>
    <header>
      <label for="penSelect">Draw color:</label>
      <select id="penSelect">
        <option value="-1" selected>Off</option>
        <option value="0">Erase</option>
        <option value="1">Red</option>
        <option value="2">Green</option>
        <option value="3">Blue</option>
        <option value="8">Filled Erase</option>
        <option value="9">Filled Red</option>
        <option value="10">Filled Green</option>
        <option value="11">Filled Blue</option>
        <option value="12">Erase Selected Cluster</option>
      </select>
      <button id="leftBtn">left</button>
      <button id="rightBtn">right</button>
      <button id="posteriorBtn">posterior</button>
      <button id="anteriorBtn">anterior</button>
      <button id="inferiorBtn">inferior</button>
      <button id="superiorBtn">superior</button>
      <button id="infoBtn">info</button>
      <button id="saveBtn">save drawing</button>
      <button id="undoBtn">undo</button>
      <button id="growcutBtn">grow cut</button>
      <label for="opacitySlider">drawing opacity</label>
      <input
        type="range"
        min="0"
        max="100"
        value="50"
        class="slider"
        id="opacitySlider"
      />
      &nbsp;
      <label for="rimCheck">rim opaque</label>
      <input type="checkbox" id="rimCheck" checked />
      &nbsp;
      <label for="overwriteCheck">fill pen overwrites</label>
      <input type="checkbox" id="overwriteCheck" checked />
      &nbsp;
      <label for="radiologicalCheck">Radiological</label>
      <input type="checkbox" id="radiologicalCheck" unchecked />
      &nbsp;
      <label for="worldCheck">World space</label>
      <input type="checkbox" id="worldCheck" unchecked />
      &nbsp;
      <label for="interpCheck">Linear Interpolation</label>
      <input type="checkbox" id="interpCheck" checked />
      &nbsp;
      <label for="dpiCheck">HighDPI</label>
      <input type="checkbox" id="dpiCheck" checked />
    </header>
    <main id="container">
      <canvas id="gl1"></canvas>
    </main>
    <footer>&nbsp;
      <label id="location"></label>
      <p>
      <textarea id="scriptText" name="customText" rows="8" cols="60">let cmap = {&#10; R: [0, 255, 22, 127],&#10; G: [0, 20, 192, 187],&#10; B: [0, 152, 80, 255],&#10; labels: ["clear", "pink","lime","sky"],&#10;};</textarea>
      &nbsp;<button id="customBtn">Apply</button>&nbsp;
    </footer>
  </body>
</html>
<script type="module" async>
  import * as niivue from '../dist/index.js'
  opacitySlider.oninput = function () {
    nv1.setDrawOpacity(this.value * 0.01)
  }
  rimCheck.onchange = function () {
    if (this.checked)
      nv1.drawRimOpacity = 1
    else
      nv1.drawRimOpacity = -1
    nv1.drawScene()
  }
  penSelect.onchange = function () {
    const mode = parseInt(this.value)
    nv1.setDrawingEnabled(mode >= 0)
    if (mode >= 0) nv1.setPenValue(mode & 7, mode > 7)
    if (mode === 12)
      //erase selected cluster
      nv1.setPenValue(-0)
  }
  leftBtn.onclick = function () {
    nv1.moveCrosshairInVox(-1, 0, 0)
  }
  rightBtn.onclick = function () {
    nv1.moveCrosshairInVox(1, 0, 0)
  }
  posteriorBtn.onclick = function () {
    nv1.moveCrosshairInVox(0, -1, 0)
  }
  anteriorBtn.onclick = function () {
    nv1.moveCrosshairInVox(0, 1, 0)
  }
  inferiorBtn.onclick = function () {
    nv1.moveCrosshairInVox(0, 0, -1)
  }
  infoBtn.onclick = function () {
    let obj = nv1.getDescriptives(0, [], true)
    let str = JSON.stringify(obj, null, 2)
    alert(str)
  }
  superiorBtn.onclick = function () {
    nv1.moveCrosshairInVox(0, 0, 1)
  }
  undoBtn.onclick = function () {
    nv1.drawUndo()
  }
  growcutBtn.onclick = function () {
    nv1.drawGrowCut()
  }
  saveBtn.onclick = function () {
    nv1.saveImage({ filename: 'test.nii', isSaveDrawing: true})
  }
  overwriteCheck.onchange = function () {
    nv1.drawFillOverwrites = this.checked
  }
  radiologicalCheck.onchange = function () {
    nv1.setRadiologicalConvention(this.checked)
  }
  worldCheck.onchange = function () {
    nv1.setSliceMM(this.checked)
  }
  interpCheck.onchange = function () {
    nv1.setInterpolation(!this.checked)
  }
  dpiCheck.onchange = function () {
    nv1.setHighResolutionCapable(this.checked)
  }
  customBtn.onclick = function () {
    var val = document.getElementById("scriptText").value
    val += ';nv1.setDrawColormap(cmap);'
    val && eval(val)
  }
  function handleLocationChange(data) {
    document.getElementById("location").innerHTML =
      "&nbsp;&nbsp;" + data.string
  }
  async function handleImageLoaded(data) {
    nv1.closeDrawing()
    nv1.setDrawingEnabled(false)
  }
  var volumeList1 = [{ url: "../images/FLAIR.nii.gz" }]
  var nv1 = new niivue.Niivue({
    backColor: [1, 1, 1, 1],
    onLocationChange: handleLocationChange,
    onImageLoaded: handleImageLoaded,
  })
  nv1.setRadiologicalConvention(false)
  nv1.opts.multiplanarShowRender = niivue.SHOW_RENDER.ALWAYS
  await nv1.attachTo("gl1")
  await nv1.loadVolumes(volumeList1)
  nv1.opts.dragMode = nv1.dragModes.pan
  nv1.setSliceType(nv1.sliceTypeMultiplanar)
  await nv1.loadDrawingFromUrl("../images/lesion.nii.gz")
  opacitySlider.oninput()
  rimCheck.onchange()
</script>
